<template>
	<view class="follow">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar title="参与话题" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
			</template>
			<view class="content">
				<view class="item" v-for="(item,index) in dataList" :key="item.id">
					<view class="box" @click="goDetails(item.id)">
						<view class="flex justify-between align-center">
							<view class="flex align-center">
								<uv-avatar :src="item.avatar || 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0811/ce642202508111742104632.png'" />
								<view class="header-box">
									<uv-text :text="item.nickname ? item.nickname : '匿名'"  size="18" color="#333" />
									<uv-text :text="item.create_time" size="12" color="#999" />
								</view>
							</view>
						</view>
						
						<view class="title">
							<uv-text :text="item.title" size="18" :color="color_black" :bold="true"/>
						</view>
						<view class="content truncate-text">
							<text class ="topic-text">{{item.topic_name}}</text>
							<text>{{ item.content }}</text>
							
							
							
						</view>
						
						<uv-album :urls="item.images" singleSize="80" multipleSize="60"></uv-album>
					</view>
					<uv-gap height="1" bgColor="#F6F4F7"></uv-gap>
					<view class="box flex align-center justify-between">
						<view class="flex align-center" @click="actionShare(item)">
							<uv-icon customPrefix="lst-icon" name="fenxiang" color="#333" size="18" />
							<uv-text :text="item.forward_num" :color="color_black" style="margin-left: 10rpx;" />
						</view>
						<view class="flex align-center" @click="goDetails(item.id)">
							<uv-icon customPrefix="lst-icon" name="xinxi1" color="#333" size="18" />
							<uv-text :text="item.comment_num" :color="color_black" style="margin-left: 10rpx;" />
						</view>
						<view class="flex align-center" @click="actionLike(item)">
							<uv-icon customPrefix="lst-icon" name="dianzan" color="#333" size="18" />
							<uv-text :text="item.likes_num" :color="color_black" style="margin-left: 10rpx;" />
						</view>
					</view>
				</view>
			</view>
		</z-paging>
		
		
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getIconPath } from '@/util'
    import { 
		getTopic,
		addComment,
		setLikes,
		forward,
		setFollowUser
	} from '@/api';
	import zPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
	const color_red = uni.$config.color.red
	const color_black = uni.$config.color.black
	const paging = ref(null)
	const dataList = ref([])
	const queryList = (pageNo, pageSize) => {
	        getTopic({ page:pageNo,limit:pageSize }).then(res => {
			    paging.value.complete(res.result.data);
			}).catch(res => {
				paging.value.complete(false);
			})
	}
	
	const goDetails=(id)=>{
		// uni.navigateTo({
		//   url: '/pages/ask/details?id='+id
		// });
	}
	
	const actionLike = async (row) => {
		let param = {}
		param.information_id = row.id;
		param.information_type = 1;
		param.status = 1;
		const result = await setLikes(param)
		if (result.code == 200) {
			uni.$uv.toast('点赞成功')
			paging.value.reload();
		}
	}
	
	const actionShare = async (row) => {
		let param = {}
		param.information_id = row.id;
		param.information_type = 1;
	
		const result = await forward(param)
		if (result.code == 200) {
			uni.$uv.toast('分享成功')
			paging.value.reload();
		}
	}
	
	const onSetFollowUser = async (item) => {
		let param = {}
		param.follow_user_id = item.user_id;
		param.information_type = 1;
		param.status = 1;
		const result = await setFollowUser(param)
		if (result.code == 200) {
			uni.$uv.toast('关注成功')
			paging.value.reload();
		}
	
	}
	
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>


<style lang="scss" scoped>
	.follow{
		::v-deep .uv-status-bar {
			background-image: none !important;
			background-color: #EAA8AD !important;
		}
		
	}
	
	.topic-text{
		color: #1E90FF;
		padding-right: 20rpx;
	}
	.item{
		margin: 0 14rpx;
		margin-top: 30rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		background-color: #fff;
	}
	.box {
		padding: 26rpx;
	}
	
	.title {
		margin: 30rpx 0;
	}
	.content {
		font-size: 24rpx !important;
		margin: 20rpx 0;
	}
	.header-box{
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;
		align-items:flex-start;
		
	}
	
	.truncate-text {
	  display: -webkit-box;
	  -webkit-line-clamp: 2; /* 限制行数 */
	  -webkit-box-orient: vertical;
	  overflow: hidden;
	  text-overflow: ellipsis;
	 /* white-space: nowrap; */ /* 单行省略 */
	  /* 或者多行省略（移除white-space） */
	}
	

	
</style>


















